<template>
  <div>
    <div style="height:60px;padding: 0 1.2rem;" class="row container">

      <router-link :to="{ path: '/', query: {}}" class="col-6 text-left">
        <img src="../../static/img/logo.png" alt="logo" style="width:70px;"><span class="small">修改密码页</span>
      </router-link>
      <div class="col-6">
         <router-link :to="{ path: '/login', query: {}}"><p class="text-right small" style="padding-top:23px;">放弃修改-> <span style="color:#409eff">请登录</span>></p></router-link>
        <!-- <p class="text-right small"><router-link  style="color:#409eff" :to="{ path: '/register', query: {}}">立即注册</router-link></p> -->
      </div>
      <!-- <div class="col-6 text-right"  style="padding-top:20px;">
        <router-link :to="{ path: '/login', query: {}}"><button type="button" class="btn btn-light btn-sm">登录</button></router-link>
        <router-link :to="{ path: '/register', query: {}}"><button type="button" class="btn btn-light btn-sm">注册</button></router-link>
      </div> -->
    </div>
  <div class="container">
    <div class="row"  style="margin-top:100px;">
      <!-- <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
      <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div> -->

      <!-- <form class="col-12" style="margin-bottom:50px;"> -->
        <div class="form-group text-left col-12">
          <!-- <label for="exampleInputEmail1">已验证手机</label> -->
          <input type="text" class="form-control" placeholder="请输入手机号" v-model="form.username">
          <small id="emailHelp" class="form-text text-muted">已注册的手机号</small>
        </div>

        <!-- <div class="form-group text-left">
          <input type="password" class="form-control" placeholder="密码">
        </div> -->
      <div class="col-12">
        <button v-if="gvbtn" @click="submitone" class="btn btn-primary col-12">获取图形校验码</button>
        <button v-else @click="submitone" class="btn btn-warning col-12">刷新图形校验码</button>
      </div>
        <!-- <img src="kaptcha.jpg" id="kaptchaImage"/> -->

        <div v-if="two" class="col-7"  style="margin-top:15px">
          <input  class="form-control" type="text"  placeholder="请输入图形验证码" v-model="form.gvcode">
        </div>

        <div class="col-5"  style="margin-top:15px">
          <img v-if="two" :src="gvimg" />
        </div>
     
      <div class="col-12">
        <button v-if="!gvbtn&&canClick" @click="submittwo" class="btn btn-primary col-12" style="margin-top:15px">获取短信验证码</button>
        <button v-if="!gvbtn&&!canClick" @click="submittwo" class="btn btn-primary col-12" style="margin-top:15px">{{totalTime}}秒后可再次获取短信验证码</button>
      </div>

        <div  v-if="three" class="col-12"  style="margin-top:15px">
          <input  class="form-control" type="text"  placeholder="请输入短信验证码" v-model="form.smscode">
        </div>

        <div v-if="three" class="col-12"  style="margin-top:15px">
          <input  class="form-control" type="password"  placeholder="请输入密码" v-model="form.password">
        </div>
<!-- @click="submitthree" -->
      <div class="col-12">
        <button v-if="three" @click="submitthree" class="btn btn-primary col-12" style="margin-top:15px">修改密码</button>
      </div>
        <div style="margin-top:15px;" v-if="alert" class="alert alert-danger col-12" role="alert">
          {{msg}}
        </div>

      <!-- </form> -->

    </div>


  </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      alert: false,
      msg: '',
      form: {"username":"","password":"","gvcode":"","smscode":""},
      gvimg: '',
      two: false,
      totalTime: 60,
      gvbtn: true,
      three: false,
      canClick: true,
    }
  },
  created() {
    // getSite()
  },
  methods: {
    submitone() {
        this.gvimg = ''
        this.axios.post(`${this.config.baseURL}${this.config.port}/gvcode/changepassword`,this.form)
        .then((response) => {
              this.msg = response.data.message
            //  console.log('data', response.data)
                this.alert = true

              if (response.data.code === 200) {
            //  console.log('2222222')

                this.alert = false
                this.two = true
                this.gvbtn = false
                this.gvimg = `${this.config.baseURL}${this.config.port}/gvcode/img?username=${this.form.username}`
              }
            })
    },
    submittwo() {
      if (!this.canClick) return

    this.axios.post(`${this.config.baseURL}${this.config.port}/smsSignup/send`,this.form)
    .then((response) => {
          this.msg = response.data.message
        //  console.log('data', response.data)
            this.alert = true

          if (response.data.code === 200) {
                this.alert = false
                this.three = true

                this.canClick = false
                let clock = window.setInterval(() => {
                  this.totalTime--
                  if (this.totalTime < 0) {
                  window.clearInterval(clock)
                  this.totalTime = 60
                  this.canClick = true  //这里重新开启
                  }
                }, 1000)

          }
        })
    },
    submitthree() {
        this.axios.post(`${this.config.baseURL}${this.config.port}/changepassword`,this.form)
        .then((response) => {
              this.msg = response.data.message
            //  console.log('data', response.data)
                this.alert = true

              if (response.data.code === 200) {
                  setTimeout(() => {
                    this.$router.push({path:'/'})
                  }, 2000);
              }
            })
    },
  // 注册
  // getSite() {
  //   this.$axios.get('/website/siteList').then(({status,data})=>{
  //       if(status===200){
  //         if(data&&data.code === 1){
  //           console.log('this.middleList', data.data.favorite)
  //           this.middleList = data.data.favorite

  //           // setTimeout(()=>{
  //           //   this.$message.success('取出成功');
  //           // }, 2300)
  //         } else if(data&&data.code === 0) {
  //           this.middleList = data.data
  //         } else {
  //           // this.error=data.msg
  //           // this.$message.error(data.msg);
  //         }
  //       }else{
  //         this.error=`服务器出错`
  //       }
  //     })
  //   }
  }  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  /* color: #42b983; */
  text-decoration:none;
}

.btn-primary {
    color: #fff;
    background-color: #409eff;
    border-color: #409eff;
}
</style>
